<template>
    <el-dialog
        :model-value="props.modelValue"
        v-bind="attrs"
        @update:model-value="setVisible"
    >
        <template #header>
            <slot name="header" />
        </template>
        <slot />
        <template #footer>
            <slot name="footer">
                <span v-if="props.showFooter" class="dialog-footer">
                    <el-button v-if="props.shwoCancelButton" :disabled="props.disabledCancelButton" @click="cancel">{{ props.cancelButtonText }}</el-button>
                    <el-button v-if="props.showConfirmButton" :disabled="props.disabledConfirmButton" type="primary" @click="confirm">{{ props.confirmButtonText }}</el-button>
                </span>
            </slot>
        </template>
    </el-dialog>
</template>

<script lang="ts">
export default { name: '' }
</script>

<script lang="ts" setup>
import { getCurrentInstance, ComponentInternalInstance, reactive, ref, nextTick, onMounted, useAttrs, useSlots } from 'vue'

// const slots = useSlots()
const attrs = useAttrs()
const emits = defineEmits(['update:modelValue', 'cancel', 'confirm'])
const { proxy } = getCurrentInstance() as ComponentInternalInstance

const props = defineProps({
    modelValue: {
        type: Boolean,
        default: false,
    },
    autoClose: {
        type: Boolean,
        default: true,
    },

    // footer
    showFooter: { // dialog是否显示footer
        type: Boolean,
        default: true,
    },
    shwoCancelButton: { // dialog是否显示取消按钮
        type: Boolean,
        default: true,
    },
    showConfirmButton: { // dialog是否显示确定按钮
        type: Boolean,
        default: true,
    },
    disabledCancelButton: { // dialog取消按钮disabled
        type: Boolean,
        default: false,
    },
    disabledConfirmButton: { // dialog确定按钮disabled
        type: Boolean,
        default: false,
    },
    cancelButtonText: { // dialog取消按钮文字
        type: String,
        default: '取消',
    },
    confirmButtonText: { // dialog确定按钮文字
        type: String,
        default: '确定',
    },
})

const setVisible = (val:boolean) => {
    if (props.autoClose) emits('update:modelValue', val)
}

const cancel = () => {
    setVisible(false)
    emits('cancel')
}

const confirm = () => {
    setVisible(false)
    emits('confirm')
}

// defineExpose({

// })
</script>
<style lang="scss" scoped>

</style>
